<template>
    <nav>
      <ul>
        <router-link
          v-for="nav in navlist"
          :key="nav.id"
          :to="nav.path"
          tag="li"
          active-class="active"
        >
          <span>{{nav.title}}</span>
        </router-link>
      </ul>
    </nav>
</template>

<script>
export default {
  data () {
    return {
      navlist:[
        { id:1, title:"电影", path:"/films" },
        { id:2, title:"影院", path:"/cinema"},
        { id:3, title:"我的", path:"/center"}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.active{
    color:skyblue;
	font-weight: bolder;
  }
  nav{
    position: fixed;
    left:0px;
    bottom:10px;
    width:100%;
    background: #fff;
    z-index:10;
    ul{
      display: flex;
      li{
        flex:1;
        text-align: center;
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>
